<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="700" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        const bulbRadius = 15;

        // Helper function to draw a line
        function drawLine(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
        }

        // Helper function to draw a bulb (circle)
        function drawBulb(x, y, r) {
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            ctx.stroke();
        }

        // Main drawing logic
        ctx.lineWidth = 2;

        // --- Draw Battery ---
        // This draws the non-standard battery symbol from the image
        const batteryX = 60;
        // Terminal stubs
        drawLine(batteryX, 150, batteryX, 80);
        drawLine(batteryX, 230, batteryX, 320);
        // Plates
        ctx.lineWidth = 4;
        drawLine(batteryX - 20, 160, batteryX + 20, 160); // Top long plate
        drawLine(batteryX - 20, 220, batteryX + 20, 220); // Bottom long plate
        ctx.lineWidth = 2;
        drawLine(batteryX - 10, 180, batteryX + 10, 180); // Middle short plate 1
        drawLine(batteryX - 10, 200, batteryX + 10, 200); // Middle short plate 2
        
        // --- Draw Main Wires (Rails) ---
        const topRailY = 80;
        const bottomRailY = 320;
        drawLine(batteryX, topRailY, 650, topRailY);
        const bottomRailStartX = 180;
        drawLine(bottomRailStartX, bottomRailY, 650, bottomRailY);
        
        // --- Draw Components ---
        
        // Bulb D
        const bulbDX = 120;
        drawBulb(bulbDX, bottomRailY, bulbRadius);
        drawLine(batteryX, bottomRailY, bulbDX - bulbRadius, bottomRailY);
        drawLine(bulbDX + bulbRadius, bottomRailY, bottomRailStartX, bottomRailY);
        ctx.font = 'bold 24px Arial';
        ctx.fillText('D', bulbDX - 8, bottomRailY + 35);

        // Top-left Bulb
        const topLeftBulbX = 150;
        drawBulb(topLeftBulbX, topRailY, bulbRadius);
        // Erase part of the top rail line for the bulb
        ctx.clearRect(topLeftBulbX - bulbRadius -1, topRailY - 10, (bulbRadius * 2) + 2, 20);
        drawLine(batteryX, topRailY, topLeftBulbX - bulbRadius, topRailY);
        drawLine(topLeftBulbX + bulbRadius, topRailY, 650, topRailY);

        // Branch A
        const branchAX = 250;
        const branchMidY = 200;
        drawLine(branchAX, topRailY, branchAX, branchMidY - bulbRadius);
        drawBulb(branchAX, branchMidY, bulbRadius);
        drawLine(branchAX, branchMidY + bulbRadius, branchAX, bottomRailY);
        ctx.fillText('A', branchAX - 40, branchMidY + 8);

        // Branch B
        const branchBX = 420;
        drawLine(branchBX, topRailY, branchBX, branchMidY - bulbRadius);
        drawBulb(branchBX, branchMidY, bulbRadius);
        drawLine(branchBX, branchMidY + bulbRadius, branchBX, bottomRailY);
        ctx.fillText('B', branchBX - 40, branchMidY + 8);

        // Branch C
        const branchCX = 590;
        const bulbC1Y = 140;
        const bulbC2Y = 260;
        drawLine(branchCX, topRailY, branchCX, bulbC1Y - bulbRadius);
        drawBulb(branchCX, bulbC1Y, bulbRadius);
        drawLine(branchCX, bulbC1Y + bulbRadius, branchCX, bulbC2Y - bulbRadius);
        drawBulb(branchCX, bulbC2Y, bulbRadius);
        drawLine(branchCX, bulbC2Y + bulbRadius, branchCX, bottomRailY);
        ctx.fillText('C', branchCX + 25, bulbC2Y + 8);

        // --- Draw Open Switches ---

        // Switch 1 (near A)
        const switch1StartX = topLeftBulbX + 40; // On top rail
        drawLine(switch1StartX, topRailY, branchAX, 170);

        // Switch 2 (between B and C)
        const switch2StartY = branchMidY + 40; // On branch B wire
        drawLine(branchBX, switch2StartY, branchCX - 20, branchMidY);

    </script>
</body>
</html>